<template>
  <view class="p-10">
    <u-row class="m-b-10">
      <view style="width: 88px; text-align: right;" class="txt-info">注册门店：</view>
      <view style="flex: 1">
        <view @click="openStores" style="height: 20px; border: 1px solid #e2e2e2; line-height: 20px; padding: 10px;">{{ form.storeName }}</view>
      </view>
    </u-row>
    <u-row class="m-b-10">
      <view style="width: 88px; text-align: right;" class="txt-info">用户名	：</view>
      <view style="flex: 1">
        <u-input v-model="form.ownerName" type="text" />
      </view>
    </u-row>
    <u-row class="m-b-10">
      <view style="width: 88px; text-align: right;" class="txt-info">积分：</view>
      <view style="flex: 1">
        <u-input v-model="form.ownerAccount" type="text" />
      </view>
    </u-row>
    <u-row class="m-b-10">
      <view style="width: 88px; text-align: right;" class="txt-info">电话：</view>
      <view style="flex: 1">
        <u-input v-model="form.ownerPhone" type="text" />
      </view>
    </u-row>
    <u-row class="m-b-10">
      <view style="width: 88px; text-align: right;" class="txt-info">地址：</view>
      <view style="flex: 1">
        <view @click="open" style="height: 20px; border: 1px solid #e2e2e2; line-height: 20px; padding: 10px;">{{ form.address }}</view>
      </view>
    </u-row>

    <view class="footer">
      <view class="del-btn" @click="del" v-if="form.id">删除</view>
      <view class="confirm-btn" @click="submit">确认</view>
    </view>

    <cityPicker
      :column="column"
      :default-value="defaultValue"
      :mask-close-able="maskCloseAble"
      @confirm="confirm"
      @cancel="cancel"
      :visible="visible"
    />

    <stores ref="stores" />

  </view>
</template>

<script>
  import dayjs from 'dayjs'
  import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
  import stores from '@/pages/components/stores/stores.vue'
  import { toast } from '@/utils/util'
  export default {
    components: {
        cityPicker,
        stores
    },
    data() {
      return {
        form: {},
        visible: false,
        maskCloseAble: true,
        defaultValue: '',
        // defaultValue: ['河北省','唐山市','丰南区'],
        column: 3
      }
    },
    onLoad(options) {
      this.form = {...options}
    },
    methods: {
      open() {
        console.log(123);
        this.visible = true
      },
      confirm (val) {
        this.form.address = val.name
        this.visible = false
      },
      cancel () {
        this.visible = false
      },
      openStores() {
        this.$refs.stores.open(data => {
          if (data) {
            this.$set(this.form, 'storeName', data.storeName)
            this.$set(this.form, 'storeId', data.storeId)
          }
        })
      },
      submit() {
        if (this.form.id) {
          this.$api.consumer.update(this.form)
          .then(res => {
            if (res.code == 200) {
              toast('已提交')
              this.form = {}
              uni.navigateBack({ delta: 1 })
            } else {
              toast(res.message)
            }
          })
        } else {
          this.$api.consumer.add(this.form)
          .then(res => {
            if (res.code == 200) {
              toast('已提交')
              this.form = {}
              uni.navigateBack({ delta: 1 })
            } else {
              toast(res.message)
            }
          })
        }
      },
      del() {
        this.$api.consumer.delete(this.form.id)
        .then(res => {
          if (res.code == 200) {
            toast('已删除')
            this.form = {}
            uni.navigateBack({ delta: 1 })
          } else {
            toast(res.message)
          }
        })
      },
    },
  }
</script>

<style lang="stylus" scoped>
  .footer
    position fixed
    bottom 0px
    left 0px
    width 100%
    color #ffffff
    height auto
    padding 10px
    box-sizing border-box
    display flex

  .confirm-btn
    flex 1
    height 44px
    line-height 44px
    text-align center
    color #FFFFFF
    background-color #0BB78E
    font-size 16px

  .del-btn
    flex 1
    height 44px
    line-height 44px
    text-align center
    color #FFFFFF
    background-color hsl(10, 80, 50)
    font-size 16px
    margin-right 10px
</style>